import React, { Component } from 'react'
import { NavBar, Icon } from 'antd-mobile';
import { Tabs } from 'antd';
import '../../assets/css/coupon.css'
import { getcoupon} from '../../request/api.js'


const { TabPane } = Tabs;
export default class coupon extends Component {
    constructor(){
        super()
        this.state={
           list1:null,
           list2:null,
           list3:null
        }
    }
    componentDidMount(){
        this.coupon()
    }
    coupon(){
        if(JSON.parse(sessionStorage.getItem('user'))==null){

            this.props.history.push('/login')
        }else {
             let a={
            uid:JSON.parse(sessionStorage.getItem('user')).uid
        }
        getcoupon(a).then(res=>{
          
           this.setState({list1:res.list[0].content})
           this.setState({list2:res.list[1].content})
           this.setState({list3:res.list[2].content}) 
            // console.log(this.state);
            // console.log(parseInt(res.list[0].content[0].begintime.toLocaleDateString() );
        
            // console.log(new Date(parseInt(res.list[0].content[0].begintime)).toLocaleDateString());
        })
        }
       
    }
    render() {
        return (
            <div className='coupon'>
                <NavBar
                className='navbar'
                        mode="light"
                        icon={<Icon type="left" />}
                        onLeftClick={() => this.props.history.goBack()}
                        rightContent={[
                            <Icon key="0" type="search" style={{ marginRight: '16px' }} />,
                            <Icon key="1" type="ellipsis" />,
                        ]}
                    >优惠券</NavBar>

    
<Tabs defaultActiveKey="1" >
    <TabPane tab="未使用" key="1">
    
      <div className='c-box'>
    <ul>
        {
           this.state.list1!=null?this.state.list1.map(ele=>(
                  <li key={ele.id}>
            <div className='top'>
                <div className='t-l'>
                    <i className='q'>￥</i><span>{ele.money}</span><br/>
                    <i>满3可用</i>
                </div>
                <div className='t-r'>
                    <p>{ele.title}</p>
                    <i >{new Date(parseInt(ele.begintime)).toLocaleDateString()}</i>至<i>{new Date(parseInt(ele.endtime)).toLocaleDateString()}</i>
                </div>
            </div>
            <div className='bottom'>{ele.description}</div>
        </li>
            )):'暂无数据'
        }
      
    </ul>
      </div>
    </TabPane>
    <TabPane tab="已使用" key="2">
    
    <div className='c-box'>
    <ul>
        {
           this.state.list2!=null?this.state.list2.map(ele=>(
                  <li key={ele.id}>
            <div className='top'>
                <div className='t-l'>
                    <i className='q'>￥</i><span>{ele.money}</span><br/>
                    <i>满3可用</i>
                </div>
                <div className='t-r'>
                    <p>{ele.title}</p>
                    <i >{new Date(parseInt(ele.begintime)).toLocaleDateString()}</i>至<i>{new Date(parseInt(ele.endtime)).toLocaleDateString()}</i>
                </div>
            </div>
            <div className='bottom'>{ele.description}</div>
        </li>
            )):'暂无数据'
        }
      
    </ul>
      </div>
    </TabPane>
    <TabPane tab="已过期" key="3">
   
    <div className='c-box'>
    <ul>
        {
           this.state.list3!=null?this.state.list3.map(ele=>(
                  <li key={ele.id}>
            <div className='top'>
                <div className='t-l'>
                    <i className='q'>￥</i><span>{ele.money}</span><br/>
                    <i>满3可用</i>
                </div>
                <div className='t-r'>
                    <p>{ele.title}</p>
                    <i >{new Date(parseInt(ele.begintime)).toLocaleDateString()}</i>至<i>{new Date(parseInt(ele.endtime)).toLocaleDateString()}</i>
                </div>
            </div>
            <div className='bottom'>{ele.description}</div>
        </li>
            )):'暂无数据'
        }
      
    </ul>
      </div>
    </TabPane>
  </Tabs>
  

                        
            </div>
        )
    }
}
